<template>
  <view>
    <simple-image :src="baseUrl + '/profile/bg/login-bg.png'" width="100%" height="600rpx"></simple-image>
    <yd-panel top="-160rpx">
      <view class="color-bg-fff border-radius-10 padding-10 margin-x-20">
        <view class="login-form-content">
          <view class="input-item flex align-center">
            <view class="iconfont icon-user icon"></view>
            <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
          </view>
          <view class="input-item flex align-center">
            <view class="iconfont icon-password icon"></view>
            <input v-model="loginForm.password" :password="true" class="input" placeholder="请输入密码" maxlength="20" />
          </view>
          <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
            <view class="iconfont icon-code icon"></view>
            <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
            <view class="login-code">
              <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
            </view>
          </view>
          <view class="action-btn margin-top-20">
            <u-button text="登录" shape="circle" size="large" :customStyle="{ height: '80rpx' }" color="#5BA2F9"
              @click="handleLogin" />
          </view>
          <view class="reg text-center" v-if="register">
            <text class="text-grey1">没有账号？</text>
            <text @click="handleUserRegister" class="color-main">立即注册</text>
          </view>
          <view class="xieyi text-center">
            <text class="text-grey1">登录即代表同意</text>
            <text @click="handleUserAgrement" class="color-main">《用户协议》</text>
            <text @click="handlePrivacy" class="color-main">《隐私协议》</text>
          </view>
        </view>
      </view>
    </yd-panel>
  </view>
</template>

<script>
import config from '@/config'
const baseUrl = config.baseUrl
import { getCodeImg } from '@/api/login'

export default {
  data() {
    return {
      baseUrl: baseUrl,
      codeUrl: "",
      captchaEnabled: true,
      // 用户注册开关
      register: false,
      globalConfig: getApp().globalData.config,
      loginForm: {
        username: "",
        password: "",
        code: "",
        uuid: ""
      }
    }
  },
  created() {
    this.getCode()
  },
  methods: {
    // 用户注册
    handleUserRegister() {
      this.$tab.redirectTo(`/pages/register`)
    },
    // 隐私协议
    handlePrivacy() {
      let site = this.globalConfig.appInfo.agreements[0]
      this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
    },
    // 用户协议
    handleUserAgrement() {
      let site = this.globalConfig.appInfo.agreements[1]
      this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
    },
    // 获取图形验证码
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
        if (this.captchaEnabled) {
          this.codeUrl = 'data:image/gif;base64,' + res.img
          this.loginForm.uuid = res.uuid
        }
      })
    },
    // 登录方法
    async handleLogin() {
      if (this.loginForm.username === "") {
        this.$modal.msgError("请输入账号")
      } else if (this.loginForm.password === "") {
        this.$modal.msgError("请输入密码")
      } else if (this.loginForm.code === "" && this.captchaEnabled) {
        this.$modal.msgError("请输入验证码")
      } else {
        this.$modal.loading("登录中，请耐心等待...")
        this.pwdLogin()
      }
    },
    // 密码登录
    async pwdLogin() {
      this.$store.dispatch('Login', this.loginForm).then(() => {
        this.$modal.closeLoading()
        this.loginSuccess()
      }).catch(() => {
        if (this.captchaEnabled) {
          this.getCode()
        }
      })
    },
    // 登录成功后，处理函数
    loginSuccess(result) {
      // 设置用户信息
      this.$store.dispatch('GetInfo').then(res => {
        this.$tab.reLaunch('/pages/index')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background: #ffffff;
}

.normal-login-container {
  width: 100%;

  .logo-content {
    width: 100%;
    font-size: 21px;
    text-align: center;
    padding-top: 15%;

    image {
      border-radius: 4px;
    }

    .title {
      margin-left: 10px;
    }
  }


}

.login-form-content {
  text-align: center;
  margin: 10px auto;
  width: 94%;

  .input-item {
    margin: 20px auto;
    background-color: #f5f6f7;
    height: 45px;
    border-radius: 20px;

    .icon {
      font-size: 38rpx;
      margin-left: 10px;
      color: #999;
    }

    .input {
      width: 100%;
      font-size: 14px;
      line-height: 20px;
      text-align: left;
      padding-left: 15px;
    }

  }

  .login-btn {
    margin-top: 40px;
    height: 45px;
  }

  .reg {
    margin-top: 15px;
  }

  .xieyi {
    color: #333;
    margin-top: 20px;
  }

  .login-code {
    height: 38px;
    float: right;

    .login-code-img {
      height: 38px;
      position: absolute;
      margin-left: 10px;
      width: 200rpx;
    }
  }
}
</style>
